<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript" src="axios.js"></script>
    <script>
    Vue.use(VueRouter)
    var User = {
        data() {
            return {
                user: '',
                error: null,
                timer:null,
                num:0,
                msg:'', //输入框中输入的内容
                msg1:'',//页面中展示的数据
                confir:true
            }
        },
        template: `
		<div>
			<div>{{num}}</div>
			<input type="text" v-model = 'msg' />
			<p>{{msg1}}</p>
			<button @click='save'>保存</button>
			<div v-if="error" class = 'error'>
				{{error}}
			</div>
			<div class='user' v-if = 'user'>
				<h2>{{user}}</h2>
			</div>
		</div>
		
    	`,
    	methods:{
    		setDatas(user){
    			this.user  = user;

    		},
    		setError(err){
    			this.err = err;
    		},
    		save(){
    			this.msg1 = this.msg;
    			this.msg = '';
    			this.confir = true;
    		}
    	},
    	created(){
    		this.timer = setInterval(()=>{
    			console.log(this.num)
    			this.num +=1;
    		},1000)
    	},
        beforeRouteEnter(to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            console.log(to);
            axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
            .then(res=>{
            	next(vm=>vm.setDatas(res.data));
            })
           .catch(err=>{
            	next(vm => vm.setError(err))
            })

        },
        beforeRouteUpdate(to, from, next) {
        	console.log(to)
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`

            this.user = null;

            this.$axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
            .then(res=>{
            	this.setDatas(res.data);
            	next();
            })
            .catch(err=>{
            	this.setError(err);
            	   next();
            })
         
        },
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            clearInterval(this.timer);
            console.log('离开了');


            if (this.confir == true && this.msg) {
            	//证明用户输入了内容 需要提示用户 保存重要信息
            	this.confir= confirm('请保存重要信息'); //用户点击了取消按钮 返回值为false

            	next(false);
            }else if(this.confir == false){
            	alert('请保存次信息后退出');
            	next(false);
            }else{
            	next();//放行路由
            }
            
        }
    }


    //我是测试组件
    var Test = {
        template: `
		<div>我是测试组件</div>
    	`
    }

    // 路由的配置
    var router = new VueRouter({
        routes: [{
            path: '/user/:id',
            name: 'user',
            component: User,

        }, {
            path: '/test',
            name: 'test',
            component: Test
        }]
    });
    //入口组件
    var App = {
        template: `
				<div>
					<router-link :to = "{name:'test'}">测试</router-link>
					<router-link :to = "{name:'user',params:{id:1}}">我的用户1</router-link>
					<router-link :to = "{name:'user',params:{id:2}}">我的用户2</router-link>

						<router-view></router-view>


				</div>
			`
    };

    Vue.prototype.$axios = axios;
    new Vue({
        el: "#app",
        data: {

        },
        components: {
            App
        },
        template: `<App />`,
        router
    });
    </script>
</body>

</html>